/* img hotspot */
var srcImg = false;
var hotImg = false;
var objImg = false;
var currentWidth = 0;
$(function () {
  //img图片弹窗
  var hotHtml =
    '<div id="hotspot" style="overflow:hidden;display:none;position: relative; top: 0; left: 0; width: 50%; height: 100%;">';
  hotHtml += '<div class="hot_img_close"><img class="hot_img_close" src="./img/close.png" /></div>';
  hotHtml += '<div class="hot-img-content" style="position: relative;">';
  hotHtml += '<div class="hot-img-div" style="position: absolute;">';
  hotHtml += '<img id="imgId" class="hot-img" src="" />';
  hotHtml += '<span class="hot-location"></span></div></div>';
  hotHtml += '<div class="hot_img_zoom"><img class="hot_img_zoom" src="./img/eyes.png" id="bigImgId"/></div></div>';
  $("#html").prepend(hotHtml);

  /* 点击图片热区 */
  $("body").on("click", ".hot-location>.hot-item", function () {
    var id = $(this).attr("id");
    $("#hotspot .hot-location").find(".hot-item").css("border", "2px solid #216797");
    $("#hotspot .hot-location").find(".hot-item-pointer").css("background-color", "#216797");
    $(this).css("border", "2px solid #FF6666");
    $(this).find(".hot-item-pointer").css("background-color", "#FF6666");
    if ("gjb" == PREFIX) {
      var src = $(this).parent().prev().attr("src");
      var pre = src.substring(src.lastIndexOf("/") + 1, src.lastIndexOf("."))
      $("#myFrame")[0].contentWindow.showHotRef(pre + "-" + id);
    } else {
      if (id.indexOf("_") >= 0) {
        $("#myFrame")[0].contentWindow.showHotRef(id.split("_")[0]);
      } else {
        $("#myFrame")[0].contentWindow.showHotRef(id);
      }
    }
    //弹窗标记
    sessionStorage.setItem("3dFlag", true);
    //调用热区居中函数
    showHot(id);

  })

  //svg图片弹窗
  var svgHotHtml =
    '<div id="svghotspot" style="overflow:hidden;display:none;position: relative; top: 0; left: 0; width: 50%; height: 100%;">';
  svgHotHtml +=
    '<div class="svg_img_close"><img class="svg_img_close" onclick="closeSvg(true)" src="./img/close.png" /></div>';
  svgHotHtml += '<div class="svg-img-content">';
  svgHotHtml += '<div class="svg-img-div" id="svg-img-div" style="width:100%;height:100%;">';
  svgHotHtml +=
    '<object data="" class="svg-img" id="svg-img" style="width:100%;height:100%;" type="image/svg+xml" onload="zoomSvg(this)"></object>';
  svgHotHtml +=
    '</div></div><div class="svg_img_zoom"><img class="svg_img_zoom" onclick="svgShow()" src="./img/eyes.png" /></div>';
  svgHotHtml += '</div>';
  $("#html").prepend(svgHotHtml);
})

function initWidth() {
  // $("#hotspot").css("width", $(window).width() * 0.46 + 16);
  $("#htmlBrowse").css({ "width": "76%" });
  // $("#one").width($("#html").width() * 0.22);
  // $("#one>div").width($("#html").width() * 0.22);
  // $("#two").width($("#html").width() * 0.22);
  // $("#two>div").width($("#html").width() * 0.22);
  // $("#three").width($("#html").width() * 0.52 - 16);
  // $("#three").css("position", "absolute");
  // var lan_leftUnfold = window.parent.parent.document.getElementById("lan_leftUnfold");
  // if ($(lan_leftUnfold).length > 0) {
  //   if (sessionStorage.getItem("myScheme") == "0" && document.getElementsByTagName('canvas').length == 0) {
  //     $("#two").css("display", "none");
  //     $("#three").css("width", $("#html").width() * 0.98);
  //     $("#three").css({ "position": "absolute", "right": "0px" });
  //   }
  // }

}

var oneHid = false;
var twoHid = false;
var twoHidPm = false;
function leftS(e) {
  oneHid = e;
  twoHid = e;
}
//移动端，x缩放，无，无，y缩放，x平移，y平移
var tMatrix = [1, 0, 0, 1, 0, 0];
var f = 0;
//点击页面图片，右显示图片
function hotImgShow(src, hot, _this) {
  console.log('点击页面图片，右显示图片', hot);
  currentWidth = $("#htmlBrowse").width();
  console.log(currentWidth, '2380138131830');
  //关闭和刷新位图/SVG
  closeImg();
  closeSvg();
  //弹窗标记
  sessionStorage.setItem("3dFlag", true);

  let widnum = $(window).width() * 0.46 + 16;
  $("#htmlBrowse").css({ "width": `calc(100% - ${widnum}px)`, 'float': 'right' });

  //初始化目录和内容函数
  //initWidth();
  srcImg = src;
  hotImg = hot;
  objImg = _this;
  // f = f + 1;
  // if (f > 1) {
  //     return false;
  // }
  //隐藏列表菜单等
  if ($("#one").is(":hidden") && $("#hotspot").is(":hidden")) {
    oneHid = true;
  }
  if ($("#two").is(":hidden") && $("#hotspot").is(":hidden")) {
    twoHid = true;
  }
  if ($("#two").is(":hidden")) {
    twoHidPm = true;
    twoHid = false;
  } else {
    twoHidPm = false;
  }
  var lan_leftUnfold = window.parent.document.getElementById("lan_leftUnfold");
  if ($(lan_leftUnfold).length > 0) {
    // 左侧收起
    $("#three").css({ "position": "fixed", "top": "0px", "right": "0", "width": "", "height": "" })
    // one two 的状态更改为隐藏
    oneHid = true;
    twoHid = true;
  }
  if ($("#two").css("display") == "none") {
    $("#three").css({ "position": "fixed", "top": "0px", "right": "0", "width": "", "height": "" })
  }

  //设置图片显示后页面的宽高
  $("#hotspot").css("width", $(window).width() * 0.46 + 16);
  $("#hotspot").css({ "display": "inline-table", "position": "absolute", "z-index": "1000" });
  //设置图片显示的路径
  $("#hotspot").find(".hot-img").attr("src", src);
  //获取当前窗口宽度
  var windowW = document.body.clientWidth / 2;
  var windowH = document.body.clientHeight;
  //获取图片真实宽度
  var realWidth = _this.width();
  var realHeight = _this.height();
  if ($(_this).attr("width")) {
    realWidth = $(_this).attr("width");
    realHeight = $(_this).attr("height");
  } else {
    realWidth = _this.width();
    realHeight = _this.height();
  }
  //初始化显示放大到150%
  var imgWidth = realWidth * 1.5;
  var imgHeight2 = realHeight * 1.5;
  // 计算图片与窗口左边距,上边距
  var imgHeight = imgWidth / realWidth * realHeight;
  var w = (windowW - imgWidth) / 2;
  var h = (windowH - imgHeight) / 2;
  //以最终的宽度对图片缩放
  $(".hot-img").css("width", imgWidth);
  $(".hot-img").css("height", imgHeight2);
  $(".hot-img").css("width", imgWidth);
  $(".hot-img").css("height", imgHeight2);
  //初始化图片的位置，//transform为了重置移动端初始化和热点点击偏移问题
  tMatrix = [1, 0, 0, 1, 0, 0];
  $(".hot-img-div").css({
    "top": h,
    "left": w,
    "transform": "matrix(1, 0, 0, 1, 0, 0)"
  });
  //显示图片里的热点框
  $(".hot-location").empty();
  if ($(".hot-location .hot-item").length <= 0) {
    for (var i = 0; i < hot.length; i++) {
      if (hot[i].objectdescr.indexOf("|") >= 0) {
        var hotArr = hot[i].objectdescr.split("|");
        for (var j = 0; j < hotArr.length; j++) {
          $(".hot-location").append('<span id="' + hot[i].id + "_" + j + 1 + '" class="hot-item" objectdescr="' + hotArr[j] +
            '" style="' + hotArr[j] + '"><div class="hot-item-pointer"></div></span>');
        }
      } else {
        $(".hot-location").append('<span id="' + hot[i].id + '" class="hot-item" objectdescr="' + hot[i].objectdescr +
          '" style="' + hot[i].objectdescr + '"><div class="hot-item-pointer"></div></span>');
      }
    }
  }
  //绑定鼠标按下事件
  drag();
  //先移除鼠标滚动事件（避免事件叠加），在绑定事件
  $("#hotspot").off('mousewheel');
  //以鼠标位置为中心的图片滚动放大缩小
  $("#hotspot").on("mousewheel", "#imgId", function (ev) {
    var oImg = this;
    var ev = event || window.event;//返回WheelEvent
    // ev.preventDefault();
    var delta = ev.detail ? ev.detail > 0 : ev.wheelDelta < 0;
    //获取鼠标在图片上的位置是图片宽度的百分比
    var ratioL = (ev.clientX - $(".hot-img-div")[0].offsetLeft) / oImg.offsetWidth,
      ratioT = (ev.clientY - $(".hot-img-div")[0].offsetTop) / oImg.offsetHeight,
      //获取图片缩放宽高
      ratioDelta = !delta ? 1 + 0.1 : 1 - 0.1,
      w = parseInt(oImg.offsetWidth * ratioDelta),
      h = parseInt(oImg.offsetHeight * ratioDelta),
      //获取图片位置
      l = Math.round(ev.clientX - (w * ratioL)),
      t = Math.round(ev.clientY - (h * ratioT));
    //限制图片缩放的大小
    if (w > realWidth * 0.5 && w < realWidth * 10) {
      //设置图片大小
      with (oImg.style) {
        width = w + 'px';
        height = h + 'px';
      }
      //设置图片位置
      $(".hot-img-div").css({
        "top": t + 'px',
        "left": l + 'px'
      });
    }
  });
  //先移除鼠标滚动事件（避免事件叠加），再绑定事件----兼容鼠标在图片热区上无法滚轮缩放
  $("body").off('mousewheel');
  //图片热区上以鼠标位置为中心的图片滚动放大缩小
  $("body").on("mousewheel", ".hot-location>.hot-item", function (ev) {
    var oImg = document.getElementById("imgId");
    var ev = event || window.event;//返回WheelEvent
    var delta = ev.detail ? ev.detail > 0 : ev.wheelDelta < 0;
    //获取鼠标在图片上的位置是图片宽度的百分比
    var ratioL = (ev.clientX - $(".hot-img-div")[0].offsetLeft) / oImg.offsetWidth,
      ratioT = (ev.clientY - $(".hot-img-div")[0].offsetTop) / oImg.offsetHeight,
      //获取图片缩放宽高
      ratioDelta = !delta ? 1 + 0.1 : 1 - 0.1,
      w = parseInt(oImg.offsetWidth * ratioDelta),
      h = parseInt(oImg.offsetHeight * ratioDelta),
      //获取图片位置
      l = Math.round(ev.clientX - (w * ratioL)),
      t = Math.round(ev.clientY - (h * ratioT));
    //获取图片真实宽度
    var realWidth = oImg.clientWidth;
    //限制图片缩放的大小
    if (w > realWidth * 0.5 && w < realWidth * 10) {
      //设置图片大小
      with (oImg.style) {
        width = w + 'px';
        height = h + 'px';
      }
      //设置图片位置
      $(".hot-img-div").css({
        "top": t + 'px',
        "left": l + 'px'
      });
    }
  })
  /* 打开放大图 先移除绑定点击事件 再创建，避免重复创建位图与SVG之间产生冲突*/
  $("#bigImgId").prop("onclick", null).off("click");
  $("#bigImgId").click(function () {
    parent.imgShow("#outerdiv", "#innerdiv", "#bigimg", src, _this);
  })
  //xtt把on改成one点击一次,关闭图片弹窗
  $("body").one("click", ".hot_img_close", function () { //再次点击淡出消失弹出层

    f = 0;
    $("#hotspot").hide();

    $("#myFrame")[0].contentWindow.closeHot();
    $("#hotspot .hot-location").find(".hot-item").css("border", "2px solid #216797");
    $("#hotspot .hot-location").find(".hot-item-pointer").css("background-color", "#216797");
    initWidth();

    var lan_leftUnfold = window.parent.document.getElementById("lan_leftUnfold");
    if ($(lan_leftUnfold).length > 0) {
      // 左侧收起
      // one two 的状态更改为隐藏
      oneHid = true;
      twoHid = true;
    } else {
      oneHid = false;
      twoHid = false;
    }
    if (oneHid) {
      parent.changeButtonLeft();
      hideLeft();
    } else {
      // parent.changeButtonRight();
      showLeft();
    }
    if (twoHid) {
      parent.changeButtonLeft();
      hideLeft();
    } else {
      if (twoHidPm) {
        // parent.changeButtonRight();
        showLeft();
        $("#two").hide();
      } else {
        // parent.changeButtonRight();
        showLeft();
      }
    }
    let isCollectStr = localStorage.getItem('isCollect');
    console.log(currentWidth, '2301830130', isCollectStr);
    if (isCollectStr === 'false' || !isCollectStr) {
      $("#htmlBrowse").css({ "width": "76%" });
    } else {
      $("#htmlBrowse").css({ "width": "100%" });
    }
    //弹窗标记
    sessionStorage.setItem("3dFlag", false);
    //xtt修改关闭图片慢的bug
    return false;
  });
}
//关闭图片
function closeImg() {
  f = 0;
  $("#hotspot").hide();
  $("#myFrame")[0].contentWindow.closeHot();
  $("#hotspot .hot-location").find(".hot-item").css("border", "2px solid #216797");
  $("#hotspot .hot-location").find(".hot-item-pointer").css("background-color", "#216797");
  initWidth();
  var lan_leftUnfold = window.parent.document.getElementById("lan_leftUnfold");
  if ($(lan_leftUnfold).length > 0) {
    // 左侧收起
    // one two 的状态更改为隐藏
    oneHid = true;
    twoHid = true;
  } else {
    oneHid = false;
    twoHid = false;
  }
  if (oneHid) {
    parent.changeButtonLeft();
    hideLeft();
  } else {
    // parent.changeButtonRight();
    showLeft();
  }
  if (twoHid) {
    parent.changeButtonLeft();
    hideLeft();
  } else {
    if (twoHidPm) {
      // parent.changeButtonRight();
      showLeft();
      $("#two").hide();
    } else {
      // parent.changeButtonRight();
      showLeft();
    }
  }
  //弹窗标记
  sessionStorage.setItem("3dFlag", false);
  //xtt修改关闭图片慢的bug
  return false;
}
/* 点击页面锚点，显示被选中的图片热区 */
function showHot(id) {
  //初始化全部选中热区的样式
  $("#hotspot .hot-location").find(".hot-item").css("border", "2px solid #216797");
  $("#hotspot .hot-location").find(".hot-item-pointer").css("background-color", "#216797");
  //循环图片热区
  $(".hot-location").children(".hot-item").each(function () {
    var hotID = $(this).attr("id");
    if (hotID.indexOf("_") >= 0 && hotID.split("_")[0] == id) {
      hotCentre(hotID);
      $("#hotspot .hot-location").find("#" + hotID).css("border", "2px solid #FF6666");
      $("#hotspot .hot-location").find("#" + hotID).find(".hot-item-pointer").css("background-color", "#FF6666");
    }
    if (hotID.indexOf("_") < 0 && hotID.split("_")[0] == id) {
      hotCentre(id);
      $("#hotspot .hot-location").find("#" + id).css("border", "2px solid #FF6666");
      $("#hotspot .hot-location").find("#" + id).find(".hot-item-pointer").css("background-color", "#FF6666");
    }
  })
  //弹窗标记
  sessionStorage.setItem("3dFlag", true);
}
//获取和设置图片热区的坐标为中心
function hotCentre(id) {
  var windowW = $(window).width() / 2; //获取当前窗口宽度
  var windowH = $(window).height(); //获取当前窗口高度
  var h = $("#" + id).css("top").substring(0, $("#" + id).css("top").indexOf("px"));
  var w = $("#" + id).css("left").substring(0, $("#" + id).css("left").indexOf("px"));
  var imgH = $("#" + id).parent().siblings("img").height();//获取图片的高度
  var imgW = $("#" + id).parent().siblings("img").width();//获取图片的宽度
  var hotH = $("#" + id).height();//获取热区的高
  var hotW = $("#" + id).width();//获取热区的宽
  if ($(".hot-img-div").css("transform")) {
    //transform为了重置移动端初始化和热点点击偏移问题
    tMatrix = [1, 0, 0, 1, 0, 0];
    $(".hot-img-div").css({
      "top": (windowH - imgH) / 2 + imgH / 2 - h - hotH / 2,
      "left": (windowW - imgW) / 2 + imgW / 2 - w - hotW / 2,
      "transform": "matrix(1, 0, 0, 1, 0, 0)"
    });
  } else {
    $(".hot-img-div").css({
      "top": (windowH - imgH) / 2 + imgH / 2 - h - hotH / 2,
      "left": (windowW - imgW) / 2 + imgW / 2 - w - hotW / 2
    });
  }
}
/* 图片拖拽 */
//传入的必须是jQuery对象，否则不能调用jQuery的自定义函数
function drag() {
  var gapX = 0;
  var gapY = 0;
  //PC端对img进行移动操作
  document.addEventListener("mousedown", function () {
    // $(".hot-img-div").css("transform"," ");
    pcStart();
  }, false);

  //PC端鼠标开始移动IMG事件函数
  function pcStart(event) {
    //兼容event
    var event = event ? event : window.event;
    //判断是否是鼠标左键按下
    if (event.which == 1) {
      gapX = event.clientX - $(".hot-img-div").offset().left;
      gapY = event.clientY - $(".hot-img-div").offset().top + $(document).scrollTop();
      //movemove事件必须绑定到$(document)上，鼠标移动是在整个屏幕上的
      $(document).bind("mousemove", pcMove);
      //此处的$(document)可以改为obj
      $(document).bind("mouseup", pcStop);
    }
    //阻止默认事件或冒泡
    return false;
  }

  function pcMove(event) {
    //兼容event
    var event = event ? event : window.event;
    if (event.which == 1) {
      $(".hot-img-div").css({
        "left": (event.clientX - gapX) + "px",
        "top": (event.clientY - gapY) + "px"
      });
    }
    //阻止默认事件或冒泡
    return false;
  }

  function pcStop(event) {
    //解绑定
    document.removeEventListener("mousedown", pcStart);
    $(document).unbind("mousemove", pcMove);
    $(document).unbind("mouseup", pcStop);
  }
}

var panZoomTiger;
var srcImgSVG = false;
var hotImgSVG = false;
/**
 * 初始化数据
 */
var displayAreaWidth = 800;
var displayAreaHeight = 600;
//xtt打开svg弹窗
function openSVG(src, hotId) {

  currentWidth = $("#htmlBrowse").width();
  console.log(currentWidth, '2380138131830');


  //关闭和刷新位图/SVG
  closeImg();
  closeSvg();
  srcImgSVG = src;
  hotImgSVG = hotId;
  //初始化目录和内容函数
  initWidth();

  let widnum = $(window).width() * 0.46 + 16;
  $("#htmlBrowse").css({ "width": `calc(100% - ${widnum}px)`, 'float': 'right' });

  //隐藏列表菜单等
  if ($("#one").is(":hidden") && $("#svghotspot").is(":hidden")) {
    oneHid = true;
  }
  if ($("#two").is(":hidden") && $("#svghotspot").is(":hidden")) {
    twoHid = true;
  }
  if ($("#two").is(":hidden")) {
    // pm 模式
    twoHidPm = true;
    twoHid = false;
  } else {
    twoHidPm = false;
  }
  //显示SVG
  var oldSrc = $("#svghotspot").find(".svg-img").attr("data");
  if (src != oldSrc) {
    $("#svg-img-div").html('<object data="' + src + '" class="svg-img" id="svg-img" style="width:100%;height:100%;"  hotid="' + hotId + '"  type="image/svg+xml"  onload="zoomSvg(this)"></object>');
  }
  var lan_leftUnfold = window.parent.document.getElementById("lan_leftUnfold");
  if ($(lan_leftUnfold).length > 0) {
    // 左侧收起
    $("#three").css({ "position": "fixed", "top": "0px", "right": "0", "width": "", "height": "" })
    // one two 的状态更改为隐藏
    oneHid = true;
    twoHid = true;
  }
  if ($("#two").css("display") == "none") {
    // pm 模式
    $("#three").css({ "position": "fixed", "top": "0px", "right": "0", "width": "", "height": "" })
  }
  $("#svghotspot").css("width", $(window).width() * 0.46 + 16);
  $("#svghotspot").css({ "display": "inline-table", "position": "absolute", "z-index": "1000" });
}
//点击页面SVG的热区显示SVG弹窗
function openSVGbyhotText(src, svgHotID, hotId) {
  srcImgSVG = src;
  if (hotId == undefined || hotId == "undefined") {
    var imgSrc = src;
    var hotId = imgSrc.substring(imgSrc.lastIndexOf("/") + 1, imgSrc.lastIndexOf("."))
  } else {
    hotImgSVG = hotId;
  }
  //初始化目录和内容函数
  initWidth();
  if ($("#two").css("display") == "none") {
    // pm 模式
    $("#three").css({ "position": "fixed", "top": "0px", "right": "0", "width": "51%", "height": "" })
  }
  //隐藏列表菜单等
  if ($("#one").is(":hidden") && $("#svghotspot").is(":hidden")) {
    oneHid = true;
  }
  if ($("#two").is(":hidden") && $("#svghotspot").is(":hidden")) {
    twoHid = true;
  }
  if ($("#two").is(":hidden")) {
    twoHidPm = true;
    twoHid = false;
  } else {
    twoHidPm = false;
  }
  var oldSrc = $("#svghotspot").find(".svg-img").attr("data");
  if (src != oldSrc) {
    $("#svg-img-div").html('<object data="' + src + '" class="svg-img" id="svg-img" style="width:100%;height: 100%" type="image/svg+xml" hotid="' +
      hotId + '" onload="zoomSvg(this)"></object>');
  }

  var lan_leftUnfold = window.parent.document.getElementById("lan_leftUnfold");
  if ($(lan_leftUnfold).length > 0) {
    // 左侧收起
    $("#three").css({ "position": "fixed", "top": "0px", "right": "0", "width": "", "height": "" })
    // one two 的状态更改为隐藏
    oneHid = true;
    twoHid = true;
  }
  $("#svghotspot").css("width", $(window).width() * 0.46 + 16);
  $("#svghotspot").css({ "display": "inline-table", "position": "absolute", "z-index": "1000" });
  if (svgHotID != null && svgHotID != '' && svgHotID != 'null') {
    showSVGHot(svgHotID);
  }
}
//初始化svg插件
function zoomSvg(obj) {
  let heitgth = $("#html").css("height")
  console.log('231371203190', heitgth, `calc(${heitgth} + "50px")`);

  $("#svg-img").css("height", `calc(${heitgth} + 50px)`);
  //设置初始化SVG的选项变量
  var svgOperate = {
    zoomEnabled: true, //开启缩放功能
    controlIconsEnabled: true, //开启右下角缩放控件功能
    zoomScaleSensitivity: 0.1,  //每次缩放大小
    dblClickZoomEnabled: false,
    panEnabled: true,   		  // 启用或禁用平移（默认启用）
    mouseWheelZoomEnabled: true,  // 启用或禁用鼠标滚轮缩放（默认启用）
    minZoom: 0.5,
    maxZoom: 20,
    center: true,
    customEventsHandler: {
      //先设置zoompan控件中停止所有的触摸事件
      haltEventListeners: ['touchstart', 'touchend', 'touchmove', 'touchleave', 'touchcancel']
      //再初始化自定义的手势事件来处理程序
      , init: function (options) {
        //初始化图片的大小和坐标
        var instance = options.instance
          , initialScale = 1
          , pannedX = 0
          , pannedY = 0
        // 初始化Hammer手势，对touch进行JT
        this.hammer = new Hammer(options.svgElement, {
          inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput
        })

        //double点击
        this.hammer.on('doubletap', function (ev) {
          instance.zoomIn()
        })
        //单指移动
        this.hammer.on('panstart panmove', function (ev) {
          //平移开始
          if (ev.type === 'panstart') {
            pannedX = 0
            pannedY = 0
          }
          //重置平移的变量
          instance.panBy({ x: ev.deltaX - pannedX, y: ev.deltaY - pannedY })
          pannedX = ev.deltaX
          pannedY = ev.deltaY
        })
        //设置启用双指缩放
        this.hammer.get('pinch').set({ enable: true })
        //进行两指缩放
        this.hammer.on('pinchstart pinchmove', function (ev) {
          //双指缩放开始时先保存初始化的比例大小，再进行计算
          if (ev.type === 'pinchstart') {
            initialScale = instance.getZoom()
            instance.zoom(initialScale * ev.scale)
          }
          instance.zoom(initialScale * ev.scale)
        })
        //双指缩放开始时先保存初始化的比例大小，再进行计算
        options.svgElement.addEventListener('touchmove', function (e) {
          e.preventDefault();
        });
      }//销毁所有手势操作
      , destroy: function () {
        this.hammer.destroy()
      }
    }
  }
  //初始化SVG
  panZoomTiger = svgPanZoom(obj, svgOperate);
  //获取SVG实例
  var svg = obj.getSVGDocument();
  //获取SVG的宽高
  displayAreaWidth = obj.clientWidth;
  displayAreaHeight = obj.clientHeight;
  //设置SVG的热点点击
  svgClick(svg);
  //弹窗标记
  sessionStorage.setItem("3dFlag", true);
}
//svg部位高亮显示
function linkGroup(groupFlag, pathList) {
  for (var i = 0; i < pathList.length; i++) {
    if (pathList[i].getAttribute("group") == groupFlag) {
      pathList[i].setAttribute("fill", "#ff0000");
    } else if (pathList[i].getAttribute("group") != null) {
      pathList[i].setAttribute("fill", "#ffffff");
    }
  }
}
//传入SVG热点id，高亮显示svg热点元素
function showSVGHot(svgHotID) {
  //获取SVG实例
  var svg = document.getElementById("svg-img").getSVGDocument();
  //如果没有实例进行onload
  if (svg != null) {
    //直接点击页面热点未加载SVG时，初始化SVG，防止无法进行缩小
    if (!panZoomTiger) {
      zoomSvg(document.getElementById("svg-img"));
      //重置SVG
      panZoomTiger = svgPanZoom('#svg-img');
    }

    //清空之前热点高亮显示
    var textList_old = svg.getElementsByTagName("text");
    var textList = new Array();
    for (var i = 0; i < textList_old.length; i++) {
      var idv = textList_old[i].getAttribute("id");
      if (idv != null) {
        textList.push(textList_old[i]);
      }
    }
    for (var i = 0; i < textList.length; i++) {
      // textList[i].setAttribute("fill", "#000000")
      textList[i].style.fill = "#000000"
    }
    //对SVG进行操作
    if (svgHotID.indexOf(';') > -1) {
      var ids = svgHotID.split(";");
      if (ids.length > 0) {
        for (var i = 0; i < ids.length; i++) {
          //设置热点高亮
          // var id = ids[i].substring(ids[i].length - 4, ids[i].length);
          var arr = ids[i].split("-")
          var id = arr[arr.length - 1];
          // svg.getElementById(id).setAttribute("fill", "#ff0000");
          svg.getElementById(id).style.fill = "#ff0000";
        }
      }
    } else {
      // 设置热点高亮
      var arr = svgHotID.split("-");
      var id = "";
      // 故障隔离流程图在s1000d的热点格式step-0001,因此不需要拆分
      if (arr[0] != "step") {
        id = arr[arr.length - 1];
      } else {
        id = svgHotID
      }
      svg.getElementById(id).style.fill = "#ff0000";
      //调用点击热点居中函数---兼容IE--IE这个函数没有XY
      gotoCenter(
        svg.getElementById(id).getBoundingClientRect().x,
        svg.getElementById(id).getBoundingClientRect().y
        // svg.getElementById(id).getBoundingClientRect().left,
        // svg.getElementById(id).getBoundingClientRect().top
      );
    }
  } else {
    document.getElementById("svg-img").onload = function () {
      showSVGHot(svgHotID);
    }
  }
}
//为svg元素添加点击事件
function svgClick(svg) {
  var textList_old = svg.getElementsByTagName("text");
  var textList = new Array();
  for (var i = 0; i < textList_old.length; i++) {
    var idv = textList_old[i].getAttribute("id");
    if (idv != null) {
      textList.push(textList_old[i]);
    }
  }
  var alist = document.getElementsByTagName("a");
  for (var i = 0; i < textList.length; i++) {
    //添加鼠标悬浮
    textList[i].onmousemove = function () { //#00aa00
      if (this.style.fill != "rgb(255, 0, 0)") {
        this.style.fill = '#0055ff';
        this.setAttribute("cursor", "pointer");
      }
    }
    textList[i].onmouseout = function () {
      if (this.style.fill != "rgb(255, 0, 0)") {
        this.style.fill = '#000000';
      }
    }
    textList[i].setAttribute('i', textList[i].getAttribute("id"));
    textList[i].addEventListener("click", function () {
      for (var i = 0; i < textList.length; i++) {
        textList[i].style.fill = "#000000";
      }
      this.style.fill = '#ff0000';
      var idv = this.getAttribute("id");
      //调用点击热点居中函数---兼容IE--IE这个函数没有XY
      gotoCenter(
        svg.getElementById(idv).getBoundingClientRect().x,
        svg.getElementById(idv).getBoundingClientRect().y
        // svg.getElementById(idv).getBoundingClientRect().left,
        // svg.getElementById(idv).getBoundingClientRect().top
      );
      $("#myFrame")[0].contentWindow.showSVGHotRef($("#svg-img").attr("hotid") + "-", this
        .getAttribute("i"));
    })
    // 移动端触摸事件
    textList[i].addEventListener("touchstart", function (ev) {
      var e = ev || window.event
      // 阻止冒泡
      e.stopPropagation();
      //取消默认行为
      e.preventDefault();
      for (var i = 0; i < textList.length; i++) {
        textList[i].setAttribute("fill", "#000000")
      }
      this.setAttribute("fill", "#ff0000");
      if ("gjb" == PREFIX) {
        $("#myFrame")[0].contentWindow.showSVGHotRef($("#svg-img").attr("hotid") + "-" + this
          .getAttribute("i"));
      } else {
        $("#myFrame")[0].contentWindow.showSVGHotRef($("#svg-img").attr("hotid") + "-hot-" + this
          .getAttribute("i"));
      }

    })
  }
}
//svg最大化全屏显示
function svgShow() {
  var src = $("#svghotspot").find(".svg-img").attr("data");
  parent.svgShow("#svgouterdiv", "#bigsvg", src);
}

function showLeft() {
  if (!$("#hotspot").is(":hidden")) {
    return false;
  }
  if (!$("#svghotspot").is(":hidden")) {
    return false;
  }
  if ($("#threeD").length > 0) {
    return false;
  }
  $("#one").css("display", "inline-table");
  $("#one").width($("#html").width() * 0.22);
  $("#one>div").width($("#html").width() * 0.22);
  $("#three").css("position", "absolute");
  $("#three").width($("#html").width() * 0.75);
}
//关闭svg图片小弹窗
function closeSvg(bool = false) {

  $("#svg-img").remove();
  $(".svg-value").text(100 + "%");
  $("#svghotspot").hide();
  $("#myFrame")[0].contentWindow.closeHot();
  initWidth();
  //关闭时加载有panZoomTiger，需要进行删除
  if (panZoomTiger) {
    panZoomTiger = undefined;
  }

  if (oneHid) {
    parent.changeButtonLeft();
    hideLeft();
  } else {
    // parent.changeButtonRight();
    showLeft();
  }
  if (twoHid) {
    parent.changeButtonLeft();
    hideLef
  } else {
    if (twoHidPm) {
      // parent.changeButtonRight();
      showLeft();
      $("#two").hide();
    } else {
      // parent.changeButtonRight();
      showLeft();
    }
  }
  let isCollectStr = localStorage.getItem('isCollect');
  console.log(currentWidth, '2301830130', isCollectStr);
  if (isCollectStr === 'false' || !isCollectStr) {
    $("#htmlBrowse").css({ "width": "76%" });
  } else {
    $("#htmlBrowse").css({ "width": "100%" });
  }
  //弹窗标记
  // sessionStorage.setItem("3dFlag",false);
}

function PrefixInteger(num, m) {
  return (Array(m).join(0) + num).slice(-m);
}

//xtt打开svg弹窗,重置图片大小函数，热点的点击事件，也是初始化
function innitSvg(src, hotId) {
  if (document.getElementById("svg-img") == null) {
    //不存在
    var html = `<object data=${src} class="svg-img" id="svg-img" style="width: 100%;height: 100%" type="image/svg+xml" hotid=${hotId} onload="zoomSvg(this)"></object>`;
    $("#svg-img-div").html("");
    $("#svg-img-div").append(html);
  }
  $("#svghotspot").css("width", $(window).width() / 2);
  $("#svghotspot").css("display", "block");
  $("#svghotspot").css("position", "absolute");
  $("#smallMedia").css('display', "block");
  $(".lbody").css("width", "50%");
  $(".lbody").css("margin-left", "50%");
  //还原文字热点的样式
  closeHot();
}

//热点居中
function gotoCenter(x_px, y_px) {
  //SVG
  panZoomTiger = svgPanZoom('#svg-img');
  if (panZoomTiger.length == 0) return;
  //调用热点剧中函数
  panZoomTigerFn(panZoomTiger, x_px, y_px, displayAreaWidth, displayAreaHeight);
}


//SVG居中函数
function panZoomTigerFn(panZoomTiger, x_px, y_px, displayAreaWidth, displayAreaHeight) {
  //获取SVG当前缩放比例
  var scale = panZoomTiger.getZoom();
  //获取SVG当前的xy
  var currentX = panZoomTiger.getPan().x;
  var currentY = panZoomTiger.getPan().y;
  //兼容SVG的高比弹出层高
  if ($("#bodyIframe", parent.document).height() == displayAreaHeight) {
    //SVG居中= 当前xy+(长宽/2-点击的xy)+(热点宽高/2*缩放比）
    var xFlag = currentX + (displayAreaWidth / 2 - x_px) - (20 / 2 * scale);
    var yFlag = currentY + (displayAreaHeight / 2 - y_px) - (20 / 2 * scale);
    //设置SVG的xy----居中---传参方式因兼容IE修改了源码
    panZoomTiger.pan({ x: xFlag, y: yFlag });
  } else {
    //SVG居中= 当前xy+(长宽/2-点击的xy)+(热点宽高/2*缩放比）
    var xFlag = currentX + (displayAreaWidth / 2 - x_px) - (20 / 2 * scale);
    var yFlag = currentY + (displayAreaHeight / 2 - y_px) - (20 / 2 * scale) - (displayAreaHeight - $("#bodyIframe", parent.document).height()) / 2;
    //设置SVG的xy----居中---传参方式因兼容IE修改了源码
    panZoomTiger.pan({ x: xFlag, y: yFlag });
  }

}




//窗口变化---重新刷新位图和SVG--最大化刷新
function clickImg() {
  if ($("#hotspot").css('display') != "none") {
    //关闭和刷新位图
    closeImg();
    hotImgShow(srcImg, hotImg, objImg);
  } else if ($("#svghotspot").css("display") != "none") {
    //关闭和刷新SVG
    closeSvg();
    openSVG(srcImgSVG, hotImgSVG);
  }
  //SVG的全屏兼容
  if ($("#svgouterdiv", parent.document).css("display") != "none") {
    //SVG最大化刷新
    svgShow();
  }

}

// $(document).ready(function () {
//   // 获取目标父节点
//   const parentNode = document.getElementById('html');

//   // 检查目标父节点是否存在
//   if (parentNode) {
//     // 创建观察者实例
//     const observer = new MutationObserver((mutationsList, observer) => {
//       for (const mutation of mutationsList) {
//         if (mutation.type === 'childList') {
//           // 检查是否新增了#tree节点
//           var $treeNode = $('#tree');
//           if ($treeNode.length > 0 && $treeNode.children().length > 0) {
//             console.log($treeNode[0], '#tree节点存在并且有子元素');
//             console.log(zNodes, '321313');

//             // 执行后续代码
//             // 在这里添加你的后续逻辑代码

//             observer.disconnect(); // 停止观察
//             break;
//           }
//         }
//       }
//     });

//     // 配置观察选项
//     const config = { childList: true, subtree: true };

//     // 开始观察
//     observer.observe(parentNode, config);
//   } else {
//     console.error('未找到id为html的元素！');
//   }
// });

